<template>
	<view class="identity-verify">
		<!-- Header Section -->
		<view class="header">
			<view class="title">
				<img src="https://api.iconify.design/material-symbols:security.svg" class="shield-icon" />
				瑞隆安健康管家
			</view>
			<view class="subtitle">
				"欢迎加入糖友健康社区!完成身份验证即可解锁：
			</view>
			<view class="benefits">
				<view class="benefit-item">✓ 积分免费兑换"健康礼品"</view>
				<view class="benefit-item">✓ 每天血糖高低一眼懂</view>
				<view class="benefit-item">✓ 家属贴心守护数据共享</view>
			</view>
			<view class="note">(1分钟快速认证，信息全程加密)</view>
			<view class="prompt">您也可以选择暂不验证，随时在页面完成"</view>
		</view>

		<!-- Verification Options -->
		<view class="verify-options">
			<view class="verify-item" :class="{ active: activeItem === 'device' }" @click="selectItem('device')">
				<view class="item-content">
					<img src="https://api.iconify.design/mdi:watch.svg" class="item-icon" />
					<span>智能设备认证</span>
				</view>
				<img src="https://api.iconify.design/material-symbols:chevron-right.svg" class="arrow-icon" />
			</view>

			<view class="verify-item" :class="{ active: activeItem === 'medical' }" @click="selectItem('medical')">
				<view class="item-content">
					<img src="https://api.iconify.design/mdi:file-document-outline.svg" class="item-icon" />
					<span>病例资料认证</span>
				</view>
				<img src="https://api.iconify.design/material-symbols:chevron-right.svg" class="arrow-icon" />
			</view>

			<view class="verify-item" :class="{ active: activeItem === 'family' }" @click="selectItem('family')">
				<view class="item-content">
					<img src="https://api.iconify.design/mdi:account-group.svg" class="item-icon" />
					<span>家属关系通道</span>
				</view>
				<img src="https://api.iconify.design/material-symbols:chevron-right.svg" class="arrow-icon" />
			</view>
		</view>

		<!-- Skip Button -->
		<view class="skip-verify">暂不验证</view>

		<!-- Footer -->
		<view class="footer">
			<view class="footer-text">"您的医疗数据：采用银行级加密存储储存时可联系客服注销"</view>
			<view class="hotline" @click="clickCell('400-698-9967')">
				<img src="https://api.iconify.design/material-symbols:security.svg" class="phone-icon" />
				400-698-9967
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'IdentityVerify',
		data() {
			return {
				activeItem: null // 用于跟踪选中的项目
			}
		},
		methods: {
			selectItem(item) {
				this.activeItem = item
				if (item === 'device') {
					uni.navigateTo({
						url: '/pages/verify/smartDevicesVerify'
					})
				} else if (item === 'medical') {
					uni.navigateTo({
						url: '/pages/verify/medicalVerify'
					})
				}else if(item === 'family'){
                    uni.navigateTo({
						url: '/pages/verify/familyVerify'
					})
                }
			},
			clickCell(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
					}
				})
			},
		}
	}
</script>

<style scoped>
	.identity-verify {
		padding: 24px;
		background: #fff;
		min-height: 100vh;
	}

	.header {
		margin-bottom: 40px;
	}

	.title {
		display: flex;
		align-items: center;
		font-size: 16px;
		color: #979797;
		margin-bottom: 15px;
	}

	.shield-icon {
		width: 24px;
		height: 24px;
		margin-right: 8px;
	}

	.subtitle {
		font-size: 16px;
		color: #979797;
		margin-bottom: 15px;
	}

	.benefits {
		margin-bottom: 10px;
	}

	.benefit-item {
		font-size: 16px;
		color: #979797;
		margin-bottom: 8px;
	}

	.note {
		font-size: 16px;
		color: #979797;
		margin-bottom: 8px;
	}

	.prompt {
		font-size: 16px;
		color: #979797;
	}

	.verify-options {
		margin-bottom: 20px;
	}

	.verify-item {
		background: #F4F4F6;
		border-radius: 12px;
		padding: 22px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.verify-item.active {
		background: #00C777;
		color: #fff;
	}

	.verify-item.active img {
		filter: brightness(0) invert(1);
	}

	.item-content {
		display: flex;
		align-items: center;
	}

	.item-icon {
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}

	.arrow-icon {
		width: 16px;
		height: 16px;
	}

	.device {
		background: #4CD964;
		color: #fff;
	}

	.skip-verify {
		text-align: center;
		color: #919191;
		font-size: 14px;
		margin: 50px 0;
		margin-left: -160px;
	}

	.footer {
		position: fixed;
		bottom: 40px;
		left: 0;
		right: 0;
		text-align: center;
	}

	.footer-text {
		font-size: 14px;
		color: #979797;
		margin-bottom: 18px;
	}

	.hotline {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1696FF;
		font-size: 14px;
	}

	.phone-icon {
		width: 18px;
		height: 18px;
		margin-right: 5px;
		color: #1696FF;
	}
</style>